<template>
	<view class="news-info" @click="toNewsDetailPage(newsInfo)">
		<view class="news-header">
			<view class="user-info">
				<!-- <image src="http://niubenben.oss-cn-shanghai.aliyuncs.com/platform-img/user-head/78dbb78a7c1fedba5b3485dfbcaf5205/2019-12-18-16-30-07.jpg" class="user-avatar"/> -->
				<!-- <image :src="newsInfo.cover" class="user-avatar"/> -->
				<!-- <text class="user-name">第十人称</text> -->
			</view>
			<!-- <text class="news-time">12:12</text> -->
		</view>
		<view class="news-body">
			<view class="body-content">
				<text class="news-title">{{newsInfo.title}}</text>
				<text class="news-subtitle">{{newsInfo.description}}</text>
			</view>
			<image :src="coverImage" class="news-img"/>
		</view>
		<view class="news-footer">
			<view class="like">
				<text class="like-number">{{newsTime}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {getThumbnail, parseTime} from '@/utils/index.js'
	import {toNewsDetailPage} from '@/utils/PageRouter.js'
	
	export default {
		name: 'NewsTwo',
		props: {
			newsInfo: {
				type: Object,
				default: function () {
					return {}
				}
			}
		},
		data() {
			return {
				coverImage: '',
				newsTime: ''
			}
		},
		// #ifdef APP-PLUS
		beforeCreate() {
			const domModule = weex.requireModule('dom')
			domModule.addRule('fontFace', {
				fontFamily: "iconfont",
				'src': "url('../../static/slw.ttf')"
			})
		},
		// #endif
		mounted() {
			const {newsInfo} = this
			this.coverImage = getThumbnail(newsInfo.cover, {m: 'fill', w: 250, h: 250})
			this.newsTime = parseTime(newsInfo.created_at)
		},
		methods: {
			toNewsDetailPage (info) {
				toNewsDetailPage(info, false)
			}
		}
	}
</script>

<style scoped>
	.slw-icon {
		color: #666;
		font-size: 32rpx;
		font-family: iconfont;
	}
	.news-info{
		background-color: #fff;
		flex-direction: column;
		justify-content: space-between;
	}
	.news-header{
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
		margin-bottom: 20rpx;
	}
	.user-info{
		align-items: center;
		flex-direction: row;
	}
	.user-avatar{
		width: 44rpx;
		height: 44rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}
	.user-name{
		font-size: 24rpx;
	}
	.news-time{
		color: #999;
		font-size: 24rpx;
	}
	
	.news-body{
		flex-direction: row;
		justify-content: space-between;
	}
	.body-content{
		flex: 1;
		flex-direction: column;
	}
	.news-title{
		lines: 2;
		font-size: 30rpx;
		line-height: 40rpx;
		font-weight: bold;
	}
	.news-subtitle{
		lines: 1;
		text-overflow: ellipsis;
		font-size: 26rpx;
		margin-top: 10rpx;
		color: #666;
	}
	.news-img{
		width: 250rpx;
		height: 160rpx;
		margin-left: 20rpx;
		border-radius: 12rpx;
	}
	
	.news-footer{
		color: #666;
		height: 40rpx;
		flex-direction: row;
	}
	.like-number{
		margin-left: 8rpx;
	}
	.like{
		align-items: center;
		flex-direction: row;
		margin-right: 20rpx;
	}
	.like-icon{
		color: #999;
		font-size: 24rpx;
	}
	.like-number{
		color: #666;
		font-size: 24rpx;
	}
</style>